<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>学生列表</title>

    <!-- js片段 -->
    <!-- jquery文件 -->
    <script src="/plugins/jquery-3.7.1.min.js"></script>

    <!-- css片段 -->
    <!-- 1.最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 2.bootstraptable文件 -->
    <link rel="stylesheet" href="/plugins/bootstrapTable/bootstrap-table.min.css">

    <!-- 3.自己的css文件 -->
    <link rel="stylesheet" href="/css/list.css">



</head>

<body>
<!-- 查询 -->
<form id="form">
    <div class="form-group">查询：
        <input type="text" class="form-control" id="InputName" placeholder="课程编号">
        <button type="button" class="btn btn-success" onclick="searchInfo()">提交</button>
        <a href="#" class="btn btn-success" onclick="reload()">刷新</a>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"  id="addButton" onclick="insertSetOption()">
            新增课程信息
        </button>
    </div>
</form>



<!-- 设计表格 -->
<table class="table table-striped" id="courses">

</table>

<!-- 新增学生信息表单 -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">学生信息</h4>
            </div>
            <div class="modal-body">
                <form id="formGrade">
                    <input hidden="hidden" id="id" name="id">
                    <div class="form-group">
                        <label for="cno">课程编号</label>
                        <input type="text" class="form-control" id="cno" name="cno" placeholder="cno">
                    </div>
                    <div class="form-group">
                        <label for="cname">课程名称</label>
                        <input type="text" class="form-control" id="cname" name="cname" placeholder="cname">
                    </div>
                    <div class="form-group">
                        <label for="tno">教师编号</label>
                        <input type="text" class="form-control" id="tno" name="tno" placeholder="tno">
                    </div>
                    <div class="form-group">
                        <label for="credit">课程学分</label>
                        <input type="text" class="form-control" id="credit" name="credit" placeholder="credit">
                    </div>
                    <div class="modal-footer" id="buttons">
                        <button type="submit" class="btn btn-primary"  id="saveButton" onclick="insertInfo()">保存</button>
                    </div>
                </form>

            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- js片段 -->
<!-- 1.自己写的list.js文件 -->
<script type="text/javascript" src="/js/admin/coursePage.js"></script>
<!-- 2.最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!-- 3.bootstraptable文件 -->
<script src="/plugins/bootstrapTable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstrapTable/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- 4.jqvalidate文件 -->
<script src="/plugins/jqvalidate/jquery.validate.min.js"></script>
<script src="/plugins/jqvalidate/localization/messages_zh.min.js"></script>
<!-- 5.自己写的js -->

<script>
    function insertSetfunction(){
        var element = document.getElementById("saveButton");
        element.setAttribute("onclick", "insertInfo()");
    }

    // 增加操作
    function insertInfo(){
        $.ajax({
            url: "/webapi/admin/insertCourse/" + $("#cno").val() +"&"+$("#cname").val()+"&"+$("#tno").val()+"&"+$("#credit"),
            method: "post",
        }).done(function (){
            reload();
            $('#myModal').modal('hide')
        })
    }


    // 删除操作
    function deleteInfo(id){
        if (confirm("该操作十分危险，是否真的要删除!")){
            $.ajax({
                url: "/webapi/admin/deleteCourse/"+id,
                method: "delete",
            }).done(function (){
                $("#courses").bootstrapTable('refresh', {url: "/webapi/admin/getallcourse/"});
            })
        }
    }

    // 模态框内容显示
    function showInfo(id, cno, cname, tno, credit){
        $("#cno").val(cno);
        $("#cname").val(cname);
        $("#tno").val(tno);
        $("#credit").val(credit);
        var element = document.getElementById("saveButton");
        element.setAttribute("onclick", "updateInfo("+id+")");
    }

    // 点击按钮更新
    function updateInfo(id){
        $.ajax({
            url: "/webapi/admin/updateCourse/"+ $("#cno").val() +"&"+$("#cname").val()+"&"+$("#tno").val()+"&"+$("#credit").val()+"&"+id,
            method: "post",
        }).done(function (){
            $('#myModal').modal('hide')
        })
    }

    function searchInfo(){
        var content = document.getElementById("InputName").value;
        $("#courses").bootstrapTable('refresh', {url: "/webapi/admin/searchCourse/"+ content});
    }

</script>

</body>




